<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html {
        font-size: 40px;
    }

    #unitTest {
        /*当使用em单位的时候，像素值是将em值乘以使用em单位的元素的字体大小。*/
        /*例如一个div的字体为18px，设置它的宽高为10em，那么此时宽高就是18px*10em=180px。*/
        /*一定要记住的是，em是根据使用它的元素的font-size的大小来变化的，而不是根据父元素字体大小。*/
        /*有些元素大小是父元素的多少倍那是因为继承了父元素中font-size的设定，所以才起到的作用。*/
        /*font-size: 10px;*/
        /*width: 20em;*/
        /*height: 20em;*/

        /*当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。*/
        /*例如，根元素的字体大小为16px，那么10rem就等同于10*16=160px。*/
        /*width: 20rem;*/
        /*height: 20rem;*/

        /*在css中，vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%，*/
        /*比如浏览器的宽度为1920px，则“1vw=1920px/100=19.2px”。*/
        /*视口单位(Viewport units)*/
        /*在PC端，视口指的是在PC端，指的是浏览器的可视区域；*/
        width: 50vw;
        height: 50vh;

        /*rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。*/
        /*规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 1px.*/
        /*width: 50rpx;*/

        background-color: hotpink;
    }
</style>
<body>
<div id="unitTest"></div>
</body>
</html>